import "../../../both/base"
require("./PersonMenu.scss")
// 首页的个人菜单

// 判断父子节点关系
function contains(parentNode, childNode) {
    if (parentNode.contains) {
        return parentNode != childNode && parentNode.contains(childNode);
    } else {
        return !!(parentNode.compareDocumentPosition(childNode) & 16);
    }
}

function checkHover(e,target){
    if (getEvent(e).type=="mouseover")  {
        return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target);
    } else {
        return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target);
    }
}

function getEvent(e){
    return e||window.event;
}

class PersonMenu extends React.Component{
    constructor(){
        super()
    }

    componentDidMount(){
        Array.prototype.map.call(document.getElementsByClassName("menu_item"),function(li){
            li.addEventListener("mouseover",function (e) {
                if(checkHover(e,li)){
                    li.className += " active"
                }
            })

            li.addEventListener("mouseout",function(e){
                if(checkHover(e,li)){
                    li.className = li.className.replace(/active/gi,"").trim()
                }
            })
        })
    }

    render(){
        return (
            <div className="person_menu_cr bln">
                <ul className="menu_list">
                    <li className="menu_item">
                        <a href="/courses?major=web">
                            <img src="/p_dist/images/2.png" />
                            <div className="direct_intro">
                                <div className="title">Web工程师</div>
                                <div className="info">前端小白入门系列课程</div>
                            </div>
                        </a>
                    </li>
                    <li className="menu_item">
                        <a href="/courses?major=android">
                            <img src="/p_dist/images/4.png" />
                            <div className="direct_intro">
                                <div className="title">Android工程师</div>
                                <div className="info">零基础入门语法与界面</div>
                            </div>
                        </a>
                    </li>
                    <li className="menu_item">
                        <a href="/courses?major=ios">
                            <img src="/p_dist/images/3.png" />
                            <div className="direct_intro">
                                <div className="title">IOS工程师</div>
                                <div className="info">IOS基础语法与常用控件</div>
                            </div>
                        </a>
                    </li>
                    <li className="menu_item">
                        <a href="/courses?major=ui">
                            <img src="/p_dist/images/1.png" />
                            <div className="direct_intro">
                                <div className="title">UI工程师</div>
                                <div className="info">PS入门与界面设计基础</div>
                            </div>
                        </a>
                    </li>
                    <li className="menu_item">
                        <a href="/courses?major=qianrushi">
                            <img src="/p_dist/images/5.png" />
                            <div className="direct_intro">
                                <div className="title">智能硬件开发</div>
                                <div className="info">智能硬件开发系列</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        )
    }
}

export default PersonMenu